<script setup lang="ts">
import dayjs from "dayjs";
import type {UserPrizeVO} from "@/types/vo/UserPrizeVO";
import {Icon} from "@iconify/vue";
import {deleteMyPrizeRecord, refundService} from "@/apis/front/prize";
import type MyPrizeModal from "@/views/Prize/components/MyPrizeModal.vue";

const {item} = defineProps<{
  item: UserPrizeVO
}>()

const message = useMessage()
const emit = defineEmits<{
  (e: 'delete', item: UserPrizeVO): void
  (e: 'refund', item: UserPrizeVO): void
}>()

const handlePositiveClick = async (item: UserPrizeVO) => {
  await deleteMyPrizeRecord(item.id)
  message.success("删除成功")
  emit('delete', item)
}

const refund = async (item: UserPrizeVO) => {
  await refundService(item.id)
  message.success("退单成功")
  emit('refund', item)
}

const modalRef = ref<InstanceType<typeof MyPrizeModal>>()
</script>

<template>
  <div class="order-item">
    <!-- 订单头部 -->
    <div class="order-header">
      <div class="order-time">
        <span class="time-label">下单时间：</span>
        <span class="time-value">{{ dayjs(item.createdTime).format("YYYY-MM-DD") }}</span>
      </div>

      <div class="order-number">
        <span class="number-label">订单号：</span>
        <span class="number-value">{{ item.id }}</span>
      </div>

      <div class="order-actions">
        <n-popconfirm @positive-click="() => handlePositiveClick(item)">
          <template #trigger>
            <n-button text class="delete-btn">
              <template #icon>
                <Icon icon="ant-design:delete-outlined" />
              </template>
              删除
            </n-button>
          </template>
          <span>确定要删除这条记录吗？</span>
        </n-popconfirm>
      </div>
    </div>

    <!-- 订单内容 -->
    <div class="order-content">
      <div class="product-image">
        <n-image
          :src="item.prizeImage"
          class="image"
          preview-disabled
          :fallback-src="'https://img.alicdn.com/imgextra/i1/O1CN01NMnZ7Q1Dcj4QfgQQM_!!6000000000236-2-tps-200-200.png'"
        />
      </div>

      <div class="product-info">
        <div class="product-name">{{ item.prizeName }}</div>
        <div class="product-points">消耗积分：{{ item.consumePoints }}</div>
      </div>

      <div class="order-operations">
        <n-button
          class="edit-btn"
          @click="() => modalRef?.open(item)"
        >
          修改信息
        </n-button>

        <n-popconfirm @positive-click="() => refund(item)">
          <template #trigger>
            <n-button class="refund-btn">
              申请退单
            </n-button>
          </template>
          <span>确定要申请退单吗？</span>
        </n-popconfirm>
      </div>
    </div>
  </div>

  <MyPrizeModal ref="modalRef"/>
</template>

<style scoped>
.order-item {
  background-color: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
}

.order-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background-color: #f9f9f9;
  border-bottom: 1px solid #f0f0f0;
  font-size: 12px;
  color: #666;
}

.order-time {
  margin-right: 24px;
}

.time-label, .number-label {
  color: #999;
}

.order-actions {
  margin-left: auto;
}

.delete-btn {
  color: #999;
  font-size: 12px;
}

.delete-btn:hover {
  color: #f56c6c;
}

.order-content {
  padding: 16px;
  display: flex;
  align-items: center;
}

.product-image {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  overflow: hidden;
  background-color: #f5f5f5;
  border: 1px solid #f0f0f0;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-info {
  margin-left: 12px;
  flex: 1;
}

.product-name {
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
}

.product-points {
  font-size: 12px;
  color: #f56c6c;
}

.order-operations {
  display: flex;
  gap: 8px;
}

.edit-btn, .refund-btn {
  font-size: 12px;
  padding: 0 12px;
  height: 28px;
  border-radius: 2px;
}

.edit-btn {
  color: #409eff;
  border-color: #409eff;
}

.edit-btn:hover {
  color: #66b1ff;
  border-color: #66b1ff;
  background-color: #ecf5ff;
}

.refund-btn {
  color: #f56c6c;
  border-color: #f56c6c;
}

.refund-btn:hover {
  color: #f78989;
  border-color: #f78989;
  background-color: #fef0f0;
}

@media (max-width: 640px) {
  .order-header {
    flex-wrap: wrap;
  }

  .order-time {
    margin-right: 12px;
  }

  .order-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .product-info {
    margin: 12px 0;
    width: 100%;
  }

  .order-operations {
    width: 100%;
    margin-top: 12px;
    justify-content: flex-end;
  }
}
</style>
